<template>
  <div class="signup-container">
    <div class="signup-participators">
      <div class="signup-avator">
        <a
          v-for="(item, index) in infoData.recently_user"
          :key="item.user_id + index"
          :href="infoData.live_url + '/user/' + item.user_id"
          :title="item.user_name"
          :style="{ 'background-image': 'url(' + item.avatar_large + ')' }"
          class="signup-avator-item"
          target="link"
        ></a>
      </div>
      <div class="signup-text">已有{{ infoData.select_cnt }}名创作者参加</div>
    </div>
    <div class="signup-btn-group">
      <div class="pullup-button signup-button" v-if="isActivityEnd" @click="onPull"></div>
      <div class="signup-button" @click="onJoin" v-else></div>
      <router-link to="/info">
        <div class="signup-button-info"></div>
      </router-link>
    </div>
  </div>
</template>

<script lang="ts">
import { reactive, toRefs, watchEffect, computed } from "vue";
import { useStore } from "vuex";
import { AxiosResponse } from "axios";
import  requestInstance from '../api/requestInstance';
export default {
  setup() {
    const state = reactive({
      infoData: {
        'live_url': "",
        'recently_user': [],
        'select_cnt': 1218,
        'start_time': 0,
        'end_time': 0,
        'annual_user_info': null,
      },
    });
    const request = requestInstance();
    request
      .post("/info", {
        'annual_id': "2020",
        'app_id': 2608,
      })
      .then((res:AxiosResponse) => {
        if (res.data.code === 200) {
          state.infoData = res.data.data;
          state.infoData.recently_user.reverse();
        }
      });
    const store = useStore();
    const isActivityEnd = computed(() => store.state.isActivityEnd);
    watchEffect(() => {
      const infoData = state.infoData;
      if (infoData) {
        store.dispatch("setInfoData", state.infoData);
      }
    });
    const refState = toRefs(state);
    const onJoin = () => {
      const isLogin = store.state.isLogin;
      if (!isLogin) {
        location.href = "https://juejin.cn/login";
      } else {
        alert("开发中...");
      }
    };
    const onPull = () => {
      alert('开发中');
    }
    return {
      ...refState,
      onJoin,
      isActivityEnd,
      onPull
    };
  },
};
</script>

<style lang="less" scoped>
.signup-container {
  height: 100.5px;
  margin: 15px 0;
  background-size: contain;
  background-repeat: no-repeat;
  background-image: url();
  .button {
    width: 140.5px;
    height: 41px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-size: contain;
    background-repeat: no-repeat;
  }
  .signup-participators {
    display: flex;
    padding: 8px 0;
    align-items: center;
    justify-content: center;
    .signup-text {
      font-size: 13px;
      font-weight: 400;
      font-stretch: normal;
      font-style: normal;
      line-height: normal;
      letter-spacing: normal;
      text-align: left;
      color: #ffd900;
    }
    .signup-avator {
      margin-right: 10px;
      margin-left: 24px;
      display: inline-flex;
      flex-wrap: wrap;
      overflow: hidden;
      .signup-avator-item {
        width: 53px;
        height: 53px;
        flex-shrink: 0;
        width: 24px;
        height: 24px;
        cursor: pointer;
        margin-left: 0;
        border: 1px solid #e3e3e3;
        display: inline-block;
        background-repeat: no-repeat;
        background-size: cover;
        border-radius: 50%;
      }
    }
  }
  .signup-btn-group {
    display: flex;
    justify-content: space-around;
    align-items: center;
    .signup-button {
      width: 140.5px;
      height: 41px;
      display: flex;
      cursor: pointer;
      justify-content: center;
      align-items: center;
      background-image: url();
      background-size: contain;
      background-repeat: no-repeat;
      &.pullup-button {
        background-image: url();
      }
    }

    a {
      background-color: transparent;
      .signup-button-info {
        cursor: pointer;
        .button;
        background-image: url();
      }
    }
  }
}
@media only screen and (min-width: 960px) {
  .signup-container {
    .button-pos {
      position: absolute;
      top: 74px;
      width: 212px;
      height: 65px;
    }
    position: absolute;
    left: 0;
    top: 330px;
    height: 139px;
    background-image: unset;
    .signup-participators {
      padding: 0;
      .signup-text {
        font-size: 21px;
        text-align: left;
        color: #fff;
      }
      .signup-avator {
        margin-left: 0;
        height: 53px;
        .signup-avator-item {
          width: 51px;
          height: 51px;
        }
      }
    }
    .signup-btn-group {
      .signup-button {
        left: 0;
        top: 74px;
        width: 212px;
        height: 65px;
        position: absolute;
      }
      a {
        .signup-button-info {
          .button-pos;
          left: 223px;
        }
      }
    }
  }
}
</style>
